<template>
  <div>
    <el-row :gutter="15">
      <el-col :span="5" v-if="searchList.indexOf('mediaName') !== -1">
        <slot name="media-input">
          <el-input
            placeholder="搜索资源名称"
            suffix-icon="el-search"
            @keyup.native.enter="inputSearch"
            v-model="searchObj.mediaName">
          </el-input>
        </slot>
      </el-col>
      <el-col :span="5" v-if="searchList.indexOf('group') !== -1">
        <el-select
          @change="changeSearch"
          v-model="searchObj.groupId"
          placeholder="组名"
          clearable
        >
          <el-option
            v-for="(item, index) in groupList"
            :label="item.group_name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="5" v-if="searchList.indexOf('client') !== -1">
        <el-select
          @change="changeSearch"
          v-model="searchObj.clientId"
          placeholder="终端"
          clearable
        >
          <el-option
            v-for="(item, index) in clientList"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-col>


      <el-col class="control-fixed-pos" :span="14">
        <el-button v-if="needList.indexOf('search') !== -1" type="default" @click="inputSearch">搜索</el-button>
        <el-button v-if="needList.indexOf('mutiSend') !== -1" type="default" @click="mutiSendFile">批量分发</el-button>
        <el-button v-if="needList.indexOf('folder') !== -1" type="default" @click="addNewFold">新建文件夹</el-button>
        <el-button v-if="needList.indexOf('group') !== -1" type="default" @click="goToGroupManager">分组管理</el-button>
        <el-button v-if="needList.indexOf('addButton') !== -1" @click="startUploadFile" type="primary" icon="el-icon-plus">
          {{addButtonText}}
        </el-button>
        <el-button v-if="needList.indexOf('delete') !== -1" type="danger" @click="mutiDel" icon="el-icon-delete">删除</el-button>
      </el-col>
    </el-row>

    <el-dialog
      title="文件夹"
      :visible.sync="showFoldDialog"
      width="30%"
      :before-close="handleClose">
      <el-form ref="form" label-width="80px">
        <el-form-item label="文件夹名">
          <el-input type="text" v-model="foldName"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="confirmCreateFold">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as service from "@/views/distribute/service";
import * as clientService from "@/views/terminal/service";

export default {
  name: "index",
  props: {
    needList: {
      type: Array,
      default: () => ['search', 'mutiSend', 'folder','group', 'addButton', 'delete']
    },
    addButtonText: {
      type: String,
      default: '上传'
    },
    searchList: {
      type: Array,
      default: () => ['mediaName', 'group']
    }
  },
  data() {
    return {
      groupList: [],
      clientList: [],
      searchObj: {
        mediaName: '',
        groupId: '',
        clientId: ''
      },
      showFoldDialog: false,
      foldName: ''
    }
  },
  mounted() {
    this.getGroupData()
    this.getClientData()
    this.$emit('changeSearch', this.searchObj)
  },
  methods: {
    mapCurrentMediaType() {
      const suffixFileMapStr = {
        '视频': 1,
        '图片': 2,
        '文档': 3,
        '应用程序': 4,
        '网页应用': 5,
        '电脑桌面': 6,
        '其他': 7,
      }
      const key = this.$route.meta.title
      return suffixFileMapStr[key]
    },
    confirmCreateFold() {
      const params = {
        mediaName: this.foldName,
        mediaType: this.mapCurrentMediaType(),
        fileType: 1,
      }
      if(this.$route.query.parentId) {
        params.parentId = this.$route.query.parentId
      }

      service.saveFileContent(params).then(() => {
        this.$message.success('创建成功')
        this.handleClose()
        this.$emit('addNewFold')
      })
    },
    handleClose() {
      this.showFoldDialog = false
      this.foldName = ''
    },
    getClientData() {
      const params = {
        page: 1,
        pageSize: 200000000
      }

      clientService.getClientList(params).then((res) => {
        this.clientList = res.data.records
      })
    },
    getGroupData() {
      const params = {
        page: 1,
        pageSize: 200000000,
        mediaType: this.mapCurrentMediaType()
      }

      service.getFileGroupList(params).then((res) => {
        this.groupList = res.data.records
      })
    },
    inputSearch() {
      console.log('搜索 ---')
      this.$emit('changeSearch', this.searchObj)
    },
    changeSearch() {
      this.$emit('changeSearch', this.searchObj)
    },
    mutiSendFile() {
      this.$emit('mutiSendFile', this.searchObj)
    },
    mutiDel() {
      this.$emit('mutiDel')
    },
    addNewFold() {
      this.showFoldDialog = true
    },
    goToGroupManager() {
      this.$emit('goToGroupManager')
    },
    startUploadFile() {
      this.$emit('startUploadFile')
    },
  }
}
</script>

<style scoped>

</style>
